<html>
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>

    <body>
        <div class="div_btn"><button id="btn" onclick="window.location.href='/'">返回首页</button></div>
        
        <hr/>
        <div class="divset">
            <div><h2>redis发布订阅案例：</h2></div>
            
            <div>quickly频道下所有的订阅者</div>
            
            <div>quickly.user1频道的订阅:
                <button id="user1" onclick="sub_user(1)">订阅user1</button>
            </div>
            
            <div>quickly.user2频道的订阅</div>
            
            <div>quickly.*频道的订阅</div>

            
            <div>quickly频道信息的发布
                <button id="publish" onclick="publish_msg(2)">发布</button>
            </div>
            
               
        </div>
        
        
    </body>

   <script type="text/javascript">

        window.onload = function(){
            //加载时先获取pub_user频道的订阅者
            //get_sub_user();
            
        
            
        }
        //查询当前pub_user频道的订阅者
        /*
        function get_sub_user(){
            
            ajaxRequest('get_sub_user','get',null,function(data){
                if(data.code == 200){
                    displayKeys(data.data);
                }else{
                    displayKeys([]);
                }
            });
        }
        */
        //订阅use人1频道
        function sub_user(num){
            ajaxRequest(
                'sub_user',
                'post',
                {'num':num},
                function(data){
                    if(data.code == 200){
                        alert(data.msg);
                        //get_sub_user();
                    }else{
                        alert(data.msg);
                    }
                }
            )
        }
        
        
         // 显示键的函数
         function displayKeys(keys) {
            var keysContainer = document.getElementById('keys-container');
            keysContainer.innerHTML = ''; // 清空容器

            if (keys.length > 0) {
                keys.forEach(function(key) {
                    var keyElement = document.createElement('div');
                    keyElement.textContent = key;
                                    
                    keysContainer.appendChild(keyElement);
                });
            } else {
                keysContainer.textContent = 'No keys found';
            }
        }
 
        // 发布punlish消息
        function publish_msg(num){
            ajaxRequest(
                'publish_msg',
                'post',
                {'sub':num,'value':'hello world!'},
                function(data){
                    if(data.code == 200){
                        alert(data.msg);
                    }else{
                        alert(data.msg);
                    }
                });
          
        }
        
        //订阅 subscribe
        function getLucky(){
            ajaxRequest(
                'lucky_key',
                'get',
                null,
                function(data){
                    if(data.code == 200){
                        alert(data.data);
                        document.getElementById("prize").innerHTML = data.data;
                        get_lucyKeys();
                    }else{
                        alert(data.msg);
                    }
                }
            )
        }


        //原生Ajax请求定义

        function ajaxRequest(url, method, data, callback) {  

            // 创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();

            // 定义请求的类型、URL以及是否异步处理
            xhr.open(method, url, true);

            // 设置请求头，指定发送的数据类型为JSON
            xhr.setRequestHeader('Content-Type', 'application/json');
            //laravel框架需要设置csrf 防渗透验证
            var csr = document.getElementsByName('csrf-token')[0].getAttribute('content');
            xhr.setRequestHeader('X-CSRF-TOKEN', csr);

            // 定义请求完成后的回调函数
            xhr.onload = function () {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    // 请求成功，处理返回的数据                        
                    callback(JSON.parse(xhr.responseText));
                    //console.log('Response:', xhr.responseText);
                } else {
                    // 请求失败，处理错误
                    console.error('Request failed with status:', xhr.status);
                }
            };

            // 定义请求出错时的回调函数
            xhr.onerror = function () {
                console.error('Request failed');
            };
            
            // 发送请求，将数据转换为JSON格式
            xhr.send(JSON.stringify(data));

        }
        
   </script> 
    <style>
        #keys-container {
            border: 1px solid #ccc; /* 设置边框 */
            height: 200px; /* 设置高度 */
            overflow-y: auto; /* 如果内容超出高度，显示滚动条 */
            padding: 10px; /* 设置内边距 */
        }
        #btn {
            position: absolute; /* 绝对定位 */
            right: 20px; /* 距离右侧 20px */
        }
        .div_btn{
            height: 35px;
        }
        
        #keys-rank {
            border: 1px solid #ccc; /* 设置边框 */
            height: 200px; /* 设置高度 */
            overflow-y: auto; /* 如果内容超出高度，显示滚动条 */
            padding: 10px; /* 设置内边距 */
        }
    </style>

</html>



